<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p style="display: none;">显示</p>
  <h1>隐藏</h1>
  <h2 style="display: none;">显示</h2>
  <button>click</button>
  <h3>切换显示和隐藏</h3>
  <h4>自定义动画</h4>
  <h5>延迟动画</h5>
  <script src="./jq-3.6.0.min.js"></script>
  <script>

    // 展示 要求原本是隐藏的
    // 三个参数show(speed, easing, fn)
    // speed表示动画时长 ms，或者用'fast' 'slow'
    // easing表示动画运动方式，有两种 swing linear
    // fn是执行动画结束后的回调函数

    // 直接显示 无动画效果
    $('p').show();

    // 完整动画效果
    $('p').show('slow',function() {
      console.log('显示出来了');
    })

    // 隐藏  要求原本是显示的 参数和显示效果一样
    $('h1').hide('slow', function() {
      console.log('隐藏了');
    })

    // 通过高度变化来显示元素
    $('h2').slideDown('fast', function() {
      console.log('显示了');
    })

    // 相对应的是slideUp

    // slideToggle切换显示或隐藏 参数和上面一致
    $('button').on('click', function() {
      $('h3').slideToggle(300, function() {
        console.log('切换状态');
      })
    })

    // 淡入淡出  参数和上面一致
    // 通过改变透明度来显示或隐藏
    // 淡入 显示
    $('button').fadeIn()

    // 淡出 隐藏
    $('button').fadeOut()

    // 淡入淡出切换
    $('button').fadeToggle()

    // 调整透明度
    // 表示将button按钮快速调整透明度为0.5
    $('button').fadeTo('fast', 0.5);

    // 自定义动画animate
    // 有4个参数animate(param, speed, easing, fn)
    // param表示最终状态的可变化css属性对象，其他参数和上面一致
    // color backgroundColor这种就不行，因为没办法变化
    $('h4').animate(
      {
        width: '300px',
        height: '200px',
        borderWidth: '5px',
      },
      1000,
      function() {
        console.log('自定义完成了');
      }
    )

    // 停止当前元素所有在运行的动画
    // stop([clearQueue],[jumpToEnd])
    // clearQueue 是否清空队列 设置为true 则表示立即结束动画
    // jumpToEnd 是否立即完成动画 设置为true 则表示立即完成动画
    $('h4').stop();
    $('h4').stop(true, true);

    // 延迟动画
    // 两个参数duration,[queueName]
    // duration 延迟触发时间 ms
    // queueName队列名
    // 表示前后两个动画之间延迟800ms执行
    $('h5').slideUp(300).delay(800).fadeIn(300);

    // 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
    // .finish()方法和.stop(true, true)很相似，
    // .stop(true, true)将清除队列，并且目前的动画跳转到其最终值。
    // 但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
    $('h5').finish();

  </script>
</body>
</html>